<template>
  <div class="page">
    <back-btn></back-btn>
    <div class="tools-bar">
      <button class="button button-clear " @click="prev" :disabled="activeIndex===0">
        <span class="icon icon-arrow-left"></span>
      </button>
      <button class="button button-clear " @click="next" :disabled="activeIndex===listData.length-1||activeIndex>=currentIndex">
        <span class="icon icon-arrow-right"></span>
      </button>
    </div>
    <div class="swiper-wrap">
      <div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-no-swiping" v-for="(item,index) in listData" :key="index">
            <div class="text-info">
              <h2>
                <span>{{index+1}}</span>/{{listData.length}}</h2>
              <p>
                {{item.content}}
              </p>
            </div>
            <div class="buttons-wrap">
              <button class="button" :class="ceil.active?'button-positive':'button-dark button-outline'" v-for="(ceil,subIndex) in item.options" :key="subIndex" @click="select(index,subIndex)">{{ceil.name}}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="buttons-wrap">
      <button class="button button-positive" :disabled="currentIndex!=listData.length" @click="showDialogs=true">提交</button>
      <button class="button button-stable button-outline" @click="showResetDialogs=true">重新测评</button>
    </div>
    <Dialogs content="确认提交吗?" v-model="showDialogs" @ensure="holland"></Dialogs>
    <Dialogs :content='`${sexName},确定重新测评吗，重新测评的话会前功尽弃哟！`' v-model="showResetDialogs" @ensure="reset"></Dialogs>
  </div>
</template>

<script>
import Vue from 'vue'
import { api } from '@/utils'
import { mapState, mapMutations } from 'vuex'
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}
export default {
  layout: 'zhiyuan',
  middleware: 'holland',
  data () {
    return {
      showDialogs: false,
      showResetDialogs: false,
      listData: [],
      content: '确认提交吗？',
      activeIndex: 0,
      swiperOption: {
        initialSlide: 0,
        centeredSlides: true,
        noSwiping: true,
        slidesPerView: 3,
        spaceBetween: 50
        // some swiper options...
      }
    }
  },
  computed: {
    sexName () {
      if (!this.userInfo.gender) {
        return '小姐姐'
      } else if (this.userInfo.gender) {
        return '小哥哥'
      }
    },
    currentIndex () {
      let i = this.lodash.findIndex(this.listData, (item) => {
        return item.value === undefined
      })
      if (i < 0) {
        return this.listData.length
      }
      return i
    },
    ...mapState({
      userInfo: 'userInfo',
      hollandList: 'hollandList'
    })
  },
  methods: {
    ...mapMutations(['SET_HOLLAND_LIST', 'SET_HOLLAND_TEST']),
    next () {
      this.mySwiper.slideNext(600, false)
      this.activeIndex = this.mySwiper.activeIndex
    },
    prev () {
      this.mySwiper.slidePrev(600, false)
      this.activeIndex = this.mySwiper.activeIndex
    },
    holland: function () {
      let obj = this.lodash.groupBy(this.listData, (item) => {
        return item.type.code
      })
      let params = {}
      for (let x in obj) {
        params[x] = this.lodash.sumBy(obj[x], (item) => {
          return item.value
        })
      }
      this.$axios.post(api.zhiyuan_holland, params).then(data => {
        this.showDialogs = false
        this.SET_HOLLAND_LIST({ name: 'zhiyuan', value: [] })
        this.SET_HOLLAND_TEST({ zhiyuanFinish: true })
        this.SET_HOLLAND_TEST({ zhiyuanReset: false })
        this.$toasted.success('提交成功')
        this.$router.replace({
          name: 'zhiyuan-report'
        })
      }).catch(() => {
        this.$toasted.error('提交失败')
      })
    },
    setListData (listData, pIndex) {
      let list = listData.map((item, i) => {
        if (i === pIndex) {
          item.active = true
        } else {
          item.active = false
        }
        return item
      })
      return list
    },
    reset () {
      this.SET_HOLLAND_LIST({ name: 'zhiyuan', value: [] })
      this.SET_HOLLAND_TEST({ zhiyuanReset: true })
      this.showDialogs = false
      location.reload()
    },
    select (index, subIndex) {
      let value // 分数
      let options = this.listData[index].options.map((item, index) => {
        if (subIndex === index) {
          item.active = true
          value = item.value
        } else {
          item.active = false
        }
        return item
      })
      this.listData[index].options = options
      this.listData[index].value = value
      this.mySwiper.slideTo(index + 1, 600, false)
      this.activeIndex = this.mySwiper.activeIndex
      let pIndex = index + 1
      this.listData = this.setListData(this.listData, pIndex)
      if (index === this.listData.length - 1) {
        this.showDialogs = true
      }
      /* 将测评列为存入vuex */
      const hollandList = this.lodash.cloneDeep(this.listData)
      this.SET_HOLLAND_LIST({ name: 'zhiyuan', value: hollandList })
    }
  },
  mounted () {
    let cacheData = this.lodash.cloneDeep(this.hollandList.zhiyuan)
    if (cacheData && cacheData.length) {
      this.listData = cacheData
      this.mySwiper.slideTo(this.currentIndex, 800, false)
      this.activeIndex = this.mySwiper.activeIndex
    } else {
      this.$axios.get(api.zhiyuan_hollandQuestions).then(data => {
        let listData = data._embedded.hollandQuestions.sort(function () {
          return Math.random() > 0.5 ? -1 : 1
        })
        this.listData = listData.map((item, index) => {
          if (index === 0) {
            item.active = true
          }
          if (item.answer) {
            item.options = [
              { name: '是', value: 1 },
              { name: '否', value: 0 }
            ]
          } else {
            item.options = [
              { name: '是', value: 0 },
              { name: '否', value: 1 }
            ]
          }
          return item
        })
      })
      /* 将测评列为存入vuex */
      const hollandList = this.lodash.cloneDeep(this.listData)
      this.SET_HOLLAND_LIST({ name: 'zhiyuan', value: hollandList })
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  .tools-bar {
    padding: 26px;
    text-align: center;
    span {
      font-size: 30px;
      margin: 0 50px;
      color: $dark06;
    }
  }
  .swiper-wrap {
    height: 450px;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 33.3%;
      height: 100%;
      z-index: 10;
      background: linear-gradient(
        90deg,
        rgba($light, 1) 0%,
        rgba($light, 0.8) 53%,
        rgba($light, 0) 100%
      );
    }
    &:after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: 33.3%;
      height: 100%;
      z-index: 10;
      background: linear-gradient(
        90deg,
        rgba($light, 0) 0%,
        rgba($light, 0.8) 53%,
        rgba($light, 1) 100%
      );
    }
    .swiper-container {
      position: absolute;
      width: 100%;
      height: 100%;
      .swiper-slide {
        padding: 40px 25px;
        box-shadow: 0 0 6px 0 rgba($dark, 0.2);
        border: 1px solid $stable-ec;
        border-radius: 3px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        p {
          padding-top: 30px;
          color: $dark06;
          font-size: 19px;
        }
        h2 {
          text-align: center;
          font-size: 36px;
          color: $dark09;
          span {
            color: $dark;
          }
        }
      }
    }
  }
  > .buttons-wrap {
    padding-top: 55px;
  }
  .buttons-wrap {
    button {
      display: block;
      width: 120px;
      margin: 20px auto 0;
    }
  }
}
</style>
